<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Online Chat Room</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/chatroom.css">
    <script data-ad-client="ca-pub-3299741067443038" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <style>
        body {
            background-color: black;
            background-image: radial-gradient(white, rgba(255, 255, 255, .2) 2px, transparent 40px),
            radial-gradient(white, rgba(255, 255, 255, .15) 1px, transparent 30px),
            radial-gradient(white, rgba(255, 255, 255, .1) 2px, transparent 40px),
            radial-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .1) 2px, transparent 30px);
            background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
            background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
        }

        .image {
            width: 50px;
            height: 50px;
        }

        .m-room .g-left {
            float: left;
            width: 745px;
            height: 100%;
            box-sizing: border-box;
            border-right: 1px solid #434e58;
        }

        .m-room .g-right {
            float: right;
            position: relative;
            width: 257px;
            height: 100%;
        }

        .image {
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
<div class="m-head">
    <div class="g-doc">
        <div class="logo item">Live Chat Room</div>
        <div class="info item">
            <img src="/static/chat_head.jpg" alt="photo" id="avatar" class="image">
            <span id="nickName"></span>
            <a href="/login.html" id="chatroom-login" style="display: none;">Login</a>
            <a id="chatroom-logout" onclick="logout()">Logout</a>
        </div>

    </div>
</div>
<div style="text-align: center;background:#e5f4ff;color: #000;width:1002px;margin: 2px auto;border:1px solid #ccc;font-size: 24px;border-radius: 5px;opacity: 0.8;">
    Hello friend, gochat it's an im server . Write By Golang !
</div>
<div class="g-doc">
    <div class="m-room" id="room">
        <div class="g-left">
            <div class="info">
                <div class="avatar">
                    <img class="image" id="roomAvatar" src="/static/chat_head.jpg">
                </div>
                <div class="detail">
                    <p class="title" id="roomTitle">gochat Live Room</p>
                    <p class="desc">Project：
                        <span id="roomCreator">gochat</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Online User Count：
                        <span id="roomOnlineMemberNum" style="color: green;font-weight: bold;">-</span>
                        <span style="margin-left:20px;">
                            <a href="https://github.com/LockGit/gochat" target="_blank">https://github.com/LockGit/gochat</a>
                        </span>
                    </p>
                </div>
            </div>
            <div class="media" style="text-align: center;">
                <p>Play Some Video</p>
                <div>
                    <img src="/static/play.gif" alt="hello" style="width:auto;height:auto;max-width:100%;max-height:100%;opacity: 0.8;">
                </div>
            </div>
        </div>
        <div class="g-right">
            <div class="m-status hide" id="linkStatus">connect...</div>
            <div class="announcement_title">
                Live Room
            </div>
            <div class="announcement" id="roomAnnouncement">
                <a href="https://github.com/LockGit/gochat" target="_blank" style="color: red;font-weight: bold;font-size: 14px;text-decoration: underline;">gochat github</a>
                <a href="https://github.com/LockGit/gochat" target="_blank" >(click)</a>
                <br>
                 Welcome to You optimize it !
            </div>
            <ul class="tab">
                <li class="crt j-tab" data-value="chat" id="tab_chat" onclick="changeTab('chat')">Live Chat</li>
                <li class="j-tab" data-value="member" id="tab_member" onclick="changeTab('member')">Online Members</li>

            </ul>
            <div class="chat j-pannel j-chat" id="msg">

            </div>

            <div class="member j-pannel hide" id="member_list">
                <div class="list j-member">
                    <div class="j-guestList" id="member_info">
                    </div>
                </div>


            </div>


            <div id="chatroom-verified">
                <div class="edit">
                    <textarea class="editText" id="editText" placeholder=""></textarea>
                </div>
                <div class="sendBtn">
                    <a class="u-btn btn" id="sentText" onclick="send()" style="border-radius: 5px;">Send</a>
                    <a class="btn custom" id="customBtn"></a>
                    <a class="btn emoji" id="emoji"></a>
                </div>
            </div>
            <div id="chatroom-anonymous">
                <em class="loginWarn">Login before sending the message</em>
                <div class="loginBtn">
                    <a href="/register.html" class="u-btn btn">Login or Register</a>
                </div>
            </div>


        </div>
    </div>
</div>
<div class="m-head" style="margin: 2px auto;">
    <p style="text-align: center;height: 50px;line-height: 50px;">gochat it's a lightweight im server write by go , Author by Lock.</p>
</div>
</body>
</html>
<script src="/js/jquery.min.js"></script>
<script src="/js/sweetalert.min.js"></script>
<script src="/js/common.js"></script>
<script src="/js/chat.js"></script>